@import '../../style/themes/index';
@import 'token.less';
@import '../../style/mixins/index.less';
@radio-prefix-cls: ~'@{kd-prefix}-radio';
@radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
@radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-focus-shadow: 0 0 0 3px rgba(85, 130, 243, 10%);

// 默认类型（单选项）
.@{radio-prefix-cls} {
  .reset-component();

  // 默认状态
  position: relative;
  display: inline-block;
  padding-left: @radio-circle-size;
  margin-right: @radio-margin-right;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  vertical-align: middle;
  color: @radio-font-color;
  font-size: @radio-font-size;
  max-width: @radio-default-label-max-width;
  // overflow: hidden;
  min-height: @radio-circle-size;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    height: @radio-circle-size;
    width: @radio-circle-size;
    content: '';
    border-radius: 50%;
    box-sizing: border-box;
    border: @radio-border-width solid @radio-color-border;
    background-color: @radio-color-background;
    transform: translateY(-50%);
    transition: border-color @transition-duration, box-shadow @transition-duration;
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 2px;
    width: calc(@radio-circle-size - 4px);
    height: calc(@radio-circle-size - 4px);
    content: '';
    border-radius: 50%;
    background-color: @radio-color-theme;
    transform: translateY(-50%);
    animation: kdRadioLeaveEffect calc(@transition-duration - 0.1s) @ease both;
    transition: all @transition-duration @ease;
    visibility: hidden;
    opacity: 0;
  }

  &-input {
    position: absolute;
    opacity: 0;
    left: 0;
  }

  &>span {
    padding: 0 6px 0 @radio-padding-left;
  }

  // 悬停状态
  &:hover {

    color: @radio-color-theme;
    &::before {
      border-color: @radio-color-theme;
    }
  }

  // 选中状态
  &-checked {
    &::before {
      border-color: @radio-color-theme;
    }

    &:focus-within::before {
      box-shadow: @radio-focus-shadow;
    }

    &::after {
      position: absolute;
      top: 50%;
      left: 2px;
      width: calc(@radio-circle-size - 4px);
      height: calc(@radio-circle-size - 4px);
      content: '';
      border-radius: 50%;
      background-color: @radio-color-theme;
      transform: translateY(-50%);
      animation: kdRadioEffect calc(@transition-duration - 0.1s) @ease both;
      transition: all calc(@transition-duration - 0.1s) @ease;
      opacity: 1;
      visibility: visible;
    }
  }

  // 禁用状态
  &-disabled,
  &-disabled:hover {
    cursor: not-allowed;
    color: @radio-color-disabled;

    &::before {
      border-color: @radio-color-disabled;
      background-color: @radio-color-background-disabled;
      box-shadow: none;
    }

    &::after {
      background-color: @radio-color-disabled;
      animation: none;
    }

    &.@{radio-prefix-cls}-checked {
      color: @radio-font-color;
    }
  }

  &-text {
    line-height: 1.5;
  }
}

// 方框类型（单选框）
.@{radio-square-prefix-cls} {
  .reset-component();

  .ellipsis();

  // 默认状态
  position: relative;
  display: inline-block;
  height: @radio-square-height;
  padding-top: @radio-square-padding-vertical;
  padding-right: @radio-square-padding-horizontal;
  padding-bottom: @radio-square-padding-vertical;
  padding-left: @radio-square-padding-horizontal;
  margin-right: @radio-margin-right;
  // line-height: calc(@radio-square-height - @radio-border-width * 2);
  line-height: calc(@radio-square-height - (@radio-square-padding-vertical * 2) - (@radio-border-width * 2));
  vertical-align: middle;
  color: @radio-font-color;
  font-size: @radio-font-size;
  cursor: pointer;
  background-color: @radio-color-background;
  overflow: hidden;
  border-radius: @radius-size;
  border: @radio-border-width solid @radio-color-border;
  transition: all @transition-duration;
  max-width: @radio-square-label-max-width;

  &::after {
    position: absolute;
    right: calc(-1 * (@radio-square-height - 10px) / 2);
    bottom: calc(-1 * (@radio-square-height - 10px) / 2);
    width: calc(@radio-square-height - 10px);
    height: calc(@radio-square-height - 10px);
    content: '';
    background-color: @radio-color-theme;
    transform: rotate(45deg);
    animation: kdRadioSquareLeaveEffect calc(@transition-duration - 0.1s) @ease both;
    transition: all @transition-duration @ease;
    opacity: 0;
    visibility: hidden;
  }

  &-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    width: 100%;
    height: 100%;

    &[disabled] {
      cursor: not-allowed;
    }
  }

  // 悬停状态
  &:hover {
    color: @radio-color-theme;
    border-color: @radio-color-theme;
  }

  // 选中状态
  &-checked {
    border-color: @radio-color-theme;

    &:focus-within {
      box-shadow: @radio-focus-shadow;
    }

    &::after {
      position: absolute;
      right: calc(-1 * (@radio-square-height - 10px) / 2);
      bottom: calc(-1 * (@radio-square-height - 10px) / 2);
      width: calc(@radio-square-height - 10px);
      height: calc(@radio-square-height - 10px);
      content: '';
      background-color: @radio-color-theme;
      transform: rotate(45deg);
      animation: kdRadioSquareEffect calc(@transition-duration - 0.1s) @ease both;
      transition: all calc(@transition-duration - 0.1s) @ease;
      opacity: 1;
      visibility: visible;
    }
  }

  &-disabled,
  &-disabled:hover {
    color: @radio-color-disabled;
    border-color: @radio-color-border-disabled;
    background-color: @radio-color-background-disabled;
    box-shadow: none;
    cursor: not-allowed;

    &::after {
      background-color: @radio-color-disabled;
      animation: none;
    }

    &.@{radio-square-prefix-cls}-checked {
      color: @radio-font-color;
    }
  }

  &-text {
    line-height: 1.5;
  }
}

// 按钮类型（切换按钮）
.@{radio-button-prefix-cls} {
  .reset-component();
  .ellipsis();
  // 默认状态
  position: relative;
  display: inline-block;
  height: @radio-square-height;
  padding-top: @radio-square-padding-vertical;
  padding-right: @radio-square-padding-horizontal;
  padding-bottom: @radio-square-padding-vertical;
  padding-left: @radio-square-padding-horizontal;
  line-height: calc(@radio-square-height - (@radio-square-padding-vertical * 2) - (@radio-border-width * 2));
  vertical-align: middle;
  color: @radio-font-color;
  font-size: @radio-font-size;
  cursor: pointer;
  background-color: @radio-color-background;
  border: @radio-border-width solid @radio-color-border;
  border-left: none;
  transition: all @transition-duration;
  max-width: @radio-button-label-max-width;

  &:first-child {
    border-radius: @radius-size 0 0 @radius-size;
    border-left: @radio-border-width solid @radio-color-border;

    &::before {
      content: none;
    }
  }

  &:last-child {
    border-radius: 0 @radius-size @radius-size 0;
  }

  &::before {
    z-index: 10;
    position: absolute;
    top: calc(-1 * @radio-border-width);
    left: calc(-1 * @radio-border-width);
    height: @radio-square-height;
    width: @radio-border-width;
    content: '';
    background-color: @radio-color-border;
  }

  &-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;

    &[disabled]{
      cursor: not-allowed;
    }
  }

  // 悬停状态
  &:hover {
    color: @radio-color-theme;
    // border-color: @radio-color-theme;
  }

  // 选中状态
  &-checked {
    z-index: 1;
    color: @radio-color-background;
    border-color: @radio-color-theme;
    background-color: @radio-color-theme;

    &:focus-within {
      box-shadow: @radio-focus-shadow;
    }

    &:hover {
      color: @radio-color-background;
    }

    &:not(.@{radio-button-prefix-cls}-disabled)::before {
      background-color: @radio-color-theme;
    }

    &:first-child {
      border-left-color: @radio-color-theme;

      &::before {
        content: none;
      }
    }

    &+.@{radio-button-prefix-cls} {
      &::before {
        content: none;
      }
    }

    &.@{radio-button-prefix-cls}-disabled {
      background-color: @radio-color-border;
      border-left-color: @radio-color-border;
      box-shadow: none;
    }
  }

  &-disabled,
  &-disabled:hover {
    color: @radio-color-disabled;
    border-color: @radio-color-border;
    // background-color: @radio-color-background-disabled;
    cursor: not-allowed;
  }

  &-text {
    .ellipsis();
    display: block;
    line-height: 1.5;
  }
}
